<link rel="stylesheet" href="/css/register-login.css" />
<script type="application/javascript" src="/js/register-login.js"></script>
<div class="col-12	col-sm-12	col-md-12	col-lg-4 col-xl-4 col-xxl-4  d-none d-lg-block "></div>
<!--内容列表-->
<div class="row  p-0 m-0 col-12	col-sm-12	col-md-12	col-lg-4 col-xl-4 col-xxl-4 ">
    <div class="col-12	col-sm-12	col-md-12	col-lg-2 col-xl-2 col-xxl-2  d-none d-lg-block p-0 m-0"></div>
    <div class="row  p-2 m-0 col-12	col-sm-12	col-md-12	col-lg-8 col-lg-8 col-lg-8 d-flex align-content-center ">
        <div class="p-2 text-center">
            <p class="h1 text-primary" style="font-weight:bold">注册</p>
        </div>
        <form class="needs-validation" novalidate>
            <div class="p-0  pt-3 form-group">
                <div class=" input-group">
                    <span class="input-group-text">用户名</span>
                    <input type="text" class="form-control rounded-end" id="userName" placeholder="用户名" name="userName" required>
                    <div class="invalid-feedback">用户名最多10位且不包括特殊字符！</div>
                </div>
            </div>
            <div class="p-0  pt-3 form-group">
                <div class="p-0   input-group">
                    <span  class="input-group-text">邮&nbsp;&nbsp;&nbsp;箱</span>
                    <input type="email" class="form-control rounded-end" id="userEmail" placeholder="邮箱" name="userEmail" required >
                    <div class="invalid-feedback">请输入正确邮箱！</div>
                </div>
            </div>

            <div class="p-0  pt-3 form-group">
                <div class="p-0 input-group">
                    <span  class="input-group-text">密&nbsp;&nbsp;&nbsp;码</span>
                    <input type="password" class="form-control rounded-end" id="pwd" placeholder="密码" name="pwd"  onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" onpaste="value=value.replace(/^A-Za-z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^A-Za-z0-9]/g,'')" onblur="value=value.replace(/[^A-Za-z0-9]/g,'')" autocomplete="off" required>
                    <div class="invalid-feedback ">只能输入6到10位数字字符密码且不包含特殊符号！</div>
                </div>
            </div>

            <div class="p-0  pt-3 form-group">
                <div class="p-0 input-group">
                    <span  class="input-group-text">确认密码</span>
                    <input type="password" class="form-control rounded-end" id="reloadPwd" placeholder="再次确认密码" name="reloadPwd" onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" onpaste="value=value.replace(/^A-Za-z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^A-Za-z0-9]/g,'')" onblur="value=value.replace(/[^A-Za-z0-9]/g,'')" autocomplete="off" required>
                    <div class="invalid-feedback">确认密码不一致！</div>
                </div>
            </div>

            <div class="p-0  pt-3 form-group">
                <div class="p-0 input-group">
                    <input type="text" class="form-control" placeholder="4位验证码" name="emailCode" id="emailCode" required>
                    <button type="button" class="btn btn-primary emailCodeButton rounded-end" style="width: 8rem;" onclick="sendEmailCode();">发送验证码</button>
                    <div class="invalid-feedback">验证码错误！</div>
                </div>
                <label for="emailCode" class="text-secondary text-danger">验证码5分钟有效</label>
            </div>
            <div class="p-0  pt-3 form-group">
                <button type="button" class="btn btn-primary w-100 registerButton" onclick="registerUser()">注册</button>
            </div>
            <div class="p-0 pt-2 text-center">
                <p>已有帐号<a class="text-primary" href="/index.html?model=login" >点击登录</a></p>
            </div>
        </form>
    </div>
    <div class="col-12	col-sm-12	col-md-12	col-lg-2 col-xl-2 col-xxl-2  d-none d-lg-block p-0 m-0"></div>
</div>
<div class=" p-0 m-0 col-12	col-sm-12	col-md-12	col-lg-4  col-xl-4 col-xxl-4  ">
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary toLogin" data-bs-dismiss="modal" style="display: none" onclick="toLogin()">登录</button>
            </div>
        </div>
    </div>
</div>

